import React, { useContext } from "react";
import {
  StyleSheet,
  View,
  Text,
  Image,
  Platform,
  StatusBar,
  TextInput,
  TouchableOpacity,
} from "react-native";
import { AntDesign } from "@expo/vector-icons";
import companyInfoContext from "../../context/personalDetails/companyInfoContext";
import personMessageContext from "../../context/personalDetails/personMessageContext";

const CompanyInfoScreen = ({ navigation }) => {
  const { companyInfo } = useContext(companyInfoContext);
  const { personMessage } = useContext(personMessageContext);
  return (
    <View style={styles.container}>
      <View style={styles.backgroundTop}></View>
      <View style={styles.itemList}>
        <TouchableOpacity
          onPress={() => navigation.goBack()}
          style={styles.closeStyle}
        >
          <AntDesign name="close" size={20} color="black" />
        </TouchableOpacity>
        <View style={styles.headerPosition}>
          <Text style={styles.headerFont}>公司信息</Text>
        </View>
        {personMessage.role == "admin" ? (
          <TouchableOpacity
            onPress={() => navigation.navigate("EditCompanyInfo")}
            style={styles.editPosition}
          >
            <AntDesign name="edit" size={20} color="black" />
          </TouchableOpacity>
        ) : null}

        <View style={styles.itemView}>
          <Text style={styles.itemTitle}>公司名称:</Text>
          <Text style={styles.itemContent}>{companyInfo.company_name}</Text>
        </View>
        <View style={styles.itemView}>
          <Text style={styles.itemTitle}>公司地址:</Text>
          <Text style={styles.itemContent}>{companyInfo.address}</Text>
        </View>
        <View style={styles.itemView}>
          <Text style={styles.itemTitle}>公司电话:</Text>
          <Text style={styles.itemContent}>{companyInfo.company_phone}</Text>
        </View>

        <View style={styles.itemView}>
          <Text style={styles.itemTitle}>负责人名称:</Text>
          <Text style={styles.itemContent}>{companyInfo.admin_name}</Text>
        </View>

        <View style={styles.itemView}>
          <Text style={styles.itemTitle}>负责人电话:</Text>
          <Text style={styles.itemContent}>{companyInfo.admin_phone}</Text>
        </View>

        <View
          style={{
            flexDirection: "row",
            height: 45,
            justifyContent: "space-between",
          }}
        >
          <Text style={styles.itemTitle}>负责人微信:</Text>
          <Text style={styles.itemContent}>{companyInfo.admin_weChat}</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "white",
    backgroundColor: "#fff9ed",
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  closeStyle: {
    position: "absolute",
    left: 25,
    top: 25,
  },
  headerPosition: {
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 30,
  },
  headerFont: {
    fontSize: 20,
    fontWeight: "bold",
  },
  editPosition: {
    position: "absolute",
    right: 25,
    top: 25,
  },
  backgroundTop: {
    width: "100%",
    height: "35%",
    // backgroundColor: "#6488e5",
    backgroundColor: "#b7e5e3",
    borderBottomLeftRadius: 30,
    borderBottomRightRadius: 30,
    position: "absolute",
    top: 0,
  },
  itemList: {
    backgroundColor: "#fff",
    padding: 22,
    width: "90%",
    borderRadius: 20,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 0,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
  },
  itemView: {
    flexDirection: "row",
    marginBottom: 13,
    height: 45,
    justifyContent: "space-between",
  },
  itemImage: {
    // 图片等比例拉伸
    resizeMode: "contain",
    width: 20,
    height: 20,
  },
  itemTitle: {
    marginLeft: 7,
    fontSize: 16,
    width: 85,
    color: "#333",
  },
  itemContent: {
    fontSize: 16,
    color: "#333",
  },
});

export default CompanyInfoScreen;
